<template>
    <div id="echart-line" :style="{ width: '100%', height: '90%'}"></div>
</template>

<script>

import * as echarts from "echarts";

export default {
    mounted() {
        console.log(echarts);
    },
    methods: {

        initChart(name, xData, yData) {

            let getchart = echarts.init(document.getElementById('echart-line'));
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: [name],
                    bottom: '0%'
                },
                grid: { //调整图表上下左右位置
                    top: '15%',
                    left: '1%',
                    right: '1%',
                    bottom: '2%',
                    containLabel: true
                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: name,
                        type: 'line',
                        stack: '总量',
                        data: yData
                    },
                ]
            };

            getchart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                getchart.resize();
            });
        },

    }

}
</script>
